<!-- 换瓶记录修正 -->
<template>
  <div class="flex-center table-top">
    <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
      <px-form-item label="设备编号" prop="eqpNo">
        <px-input v-model.trim="queryParams.eqpNo" style="width: 260px" placeholder="请输入设备编号" clearable />
      </px-form-item>
      <px-form-item label="日期" prop="date">
        <px-date-picker v-model="queryParams.date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 260px" />
      </px-form-item>
      <div class="search-form-btn">
        <px-button type="primary" @click="handleQuery">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
      </div>
    </px-form>
  </div>
  <div v-loading="tableLoading" ref="tableBoxRef" class="table-content">
    <px-table :data="tableData" size="small" border class="common-table" :height="scrollbarHeight">
      <px-table-column type="index" label="序号" fixed width="55" align="center" />
      <px-table-column prop="itemKey" label="设备编号" fixed min-width="120" show-overflow-tooltip />
      <px-table-column prop="gasName" label="气体种类" fixed min-width="120" show-overflow-tooltip />
      <px-table-column prop="unit" label="单位" fixed min-width="80" show-overflow-tooltip />
      <px-table-column prop="statDate" label="换瓶日期" min-width="120" show-overflow-tooltip />
      <px-table-column prop="quantity" label="换瓶次数" min-width="120" show-overflow-tooltip />
      <px-table-column label="操作" width="100" fixed="right" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="`GAS_CONSUMPTION_SPECIALGAS_CHANGE_EDIT_BTN`" link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
  </div>
  <px-dialog v-model="editDialogVisible" title="编辑" width="400">
    <px-form ref="editFormRef" :model="editFormParams">
      <px-form-item label="换瓶次数" prop="quantity" label-width="80">
        <px-input v-model.trim="editFormParams.quantity" placeholder="请输入" clearable />
      </px-form-item>
    </px-form>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancelEdit">取消</px-button>
        <px-button type="primary" @click="saveEdit">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted } from "vue";
import { getDecantListAPI, editDecantListAPI } from "@/api/consumption/specialGas";
import { PxMessage } from "px-ui";
import dayjs from "dayjs";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

defineOptions({
  name: "GAS_CONSUMPTION_SPECIALGAS_DECANT"
});

const formRef = ref(null);
const editFormRef = ref(null);

const gap = 40;
const defaultHeight = 606;
const scrollbarHeight = ref<number>(defaultHeight);
const tableBoxRef = ref<HTMLElement | null>(null);

const state = reactive({
  queryParams: {
    eqpNo: "",
    date: dayjs().format("YYYY-MM-DD") || ""
  },
  tableLoading: false,
  tableData: [],
  editDialogVisible: false,
  rowData: {},
  editFormParams: {}
});
const { queryParams, tableLoading, tableData, editDialogVisible, editFormParams } = toRefs(state);

onMounted(async () => {
  handleQuery();
  await useUpdateDomHeight(scrollbarHeight, tableBoxRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());

// 查询
const handleQuery = async () => {
  try {
    state.tableLoading = true;
    const { eqpNo, date } = state.queryParams;
    const params = {
      deviceCode: eqpNo,
      startDate: date === "" ? "" : date,
      endDate: date === "" ? "" : date
    };
    state.tableData = await getDecantListAPI(params);
  } catch (err) {
    console.log(err);
  } finally {
    state.tableLoading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  state.queryParams.date = dayjs().format("YYYY-MM-DD") || "";
  handleQuery();
};

// 编辑
const handleEdit = row => {
  state.editDialogVisible = true;
  state.rowData = row;
  state.editFormParams = {
    quantity: row.quantity
  };
};

// 取消编辑
const cancelEdit = () => {
  editFormRef.value.resetFields();
  state.editDialogVisible = false;
};

// 保存编辑
const saveEdit = async () => {
  const { itemKey, itemType, statDate } = state.rowData;
  const params = {
    itemKey,
    itemType,
    statDate,
    quantity: state.editFormParams.quantity
  };
  await editDecantListAPI(params);
  cancelEdit();
  handleQuery();
  PxMessage.success("修改成功");
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");
</style>
